﻿<template>
  <div class="app-container">
    <div class="chart-title with-back">
      <div class="chart-left">
        <div>档案管理</div>
        <div class="backtrack">
          <el-button @click="comeBack">返回</el-button>
        </div>
      </div>
    </div>
    <div class="order-list">
      取餐日期：{{ goods_date }}
    </div>
    <div class="chart-content special">
      <div class="chart-list">
        <el-table
          :key="tableKey"
          v-loading="listLoading"
          :data="list"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
          element-loading-background="rgba(255,255,255,0.2)"
          border
          fit
          highlight-current-row
          style="width: 100%min-height:1000px"
        >
          <el-table-column
            fixed="left"
            align="center"
            :label="$t('table.id')"
            width="65"
          >
            <template slot-scope="scope">
              <span>{{
                (listQuery.page - 1) * listQuery.limit + scope.$index + 1
              }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('supplier.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.supplier_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('meal.name')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.goods_name }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.pictrue')"
          >
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.goods_main_img"
                fit="contain"
              ></el-image>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('price.book')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.front_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('price.now')"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.buy_price }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            show-overflow-tooltip
            :label="$t('public.status')"
          >
            <template slot-scope="scope">
              <span>{{ mealsStatus(scope.row.status) }}</span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            :label="$t('table.actions')"
            fixed="right"
          >
            <template slot-scope="scope">
              <div class="operat-button">
                <div
                  class="read-img"
                  @click="handleRead(scope.row)"
                >
                  <img src="@/assets/images/read@2x.png" />
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="operat-content">
        <div>

        </div>
        <div class="operat-verify">
          <div
            class="operat-confirm"
            @click="releaseData"
          >发布</div>
          <div
            class="operat-confirm"
            @click="sendData"
          >发送</div>
        </div>
      </div>
      <!-- 编辑 -->
      <el-dialog
        :title="
            textMap[dialogStatus]"
        :visible.sync="dialogVisible"
      >
        <el-form
          ref="dataForm"
          :rules="rules"
          :model="temp"
          label-position="right"
          label-width="35%"
          size="small"
        >
          <div class="pops">
            <div class="information-title">
              <span class="icon-title"></span>
              <span>基础信息:</span>
            </div>
            <div class="pops-item">
              <div class="pops-left">
                <el-form-item :label="$t('supplier.name')+' :'">
                  <el-input
                    v-model="temp.supplier_name"
                    :readonly="true"
                  ></el-input>
                </el-form-item>
                <el-form-item :label="$t('goods.name')+' :'">
                  <drop-down-select
                    :data="goodsOptions"
                    :count="goodsCount"
                    :page-size="pageSize"
                    :id="temp.goods_id"
                    :name="temp.goods_name"
                    :disabled="dialogStatus==='edit'?false:true"
                    @getList="(pageNumber, search)=>{return getGoods(pageNumber, search,'getGoods')}"
                    @addList="(pageNumber, search)=>{return getGoods(pageNumber, search,'addGoods')}"
                    @choose="(data)=>{return choose(data, 'goods')}"
                    @remove="(data)=>{return remove(data, 'goods')}"
                  ></drop-down-select>
                </el-form-item>
                <el-form-item
                  v-if="temp.remark"
                  :label="$t('public.remark')+' :'"
                >
                  <el-input
                    v-model="temp.remark"
                    :readonly="true"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="pops-right">
                <el-form-item :label="$t('price.book')+' :'">
                  <el-input-number
                    class="left-number"
                    v-model="temp.front_price"
                    :controls="false"
                    :disabled="dialogStatus==='edit'?false:true"
                  ></el-input-number>
                </el-form-item>
                <el-form-item :label="$t('price.now')+' :'">
                  <el-input-number
                    class="left-number"
                    v-model="temp.buy_price"
                    :controls="false"
                    :disabled="dialogStatus==='edit'?false:true"
                  ></el-input-number>
                </el-form-item>
              </div>
            </div>
          </div>
        </el-form>
        <div
          slot="footer"
          class="dialog-footer between-space"
        >
          <div>
            <el-button
              v-show="dialogStatus == 'read'"
              type="primary"
              @click="handleEdit"
            >{{ $t("table.edit") }}</el-button>
          </div>
          <div>
            <el-button @click="dialogVisible = false">{{
              $t("table.cancel")
            }}</el-button>
            <el-button
              v-if="dialogStatus == 'edit'"
              type="primary"
              :disabled="!updateDisabled"
              @click="updateData"
            >{{ $t("table.confirm") }}</el-button>
            <el-button
              v-else
              type="primary"
              @click="dialogVisible = false"
            >{{ $t("table.confirm") }}</el-button>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script type="text/javascript">
import dropDownSelect from "@/views/select/dropDownSelect"; // 分页选择控件
import { getToken } from "@/utils/auth";
export default {
  name: "Itoc",
  components: {
    "drop-down-select": dropDownSelect
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: null,
      listLoading: true,
      goods_date: "",
      listQuery: {
        page: 1,
        limit: 20,
        name: "",
        code: "",
        status: "",
        linkname: "",
        linkname_mobile: "",
        region_name: "",
        region_type: ""
      },
      avaiableDateList: [],
      pickerOptions: {
        disabledDate: (time) => {
          var date = this.timestampToTime(time, '{y}-{m}-{d}')
          return this.avaiableDateList.includes(date) || time.getTime() < new Date().getTime();
        }
      },
      districtsOptions: [],
      LastDateTimestamp: undefined,
      temp: {
        id: undefined,
        goods_id: undefined,
        front_price: 0,
        buy_price: 0
      },
      rules: {
        name: [{ required: true, message: "请选择商品", trigger: "change" }]
      },
      dialogVisible: false,
      dialogStatus: "",
      textMap: {
        edit: "编辑",
        create: "新建排餐",
        review: "审核",
        read: "查看"
      },
      createDisabled: true,
      saveDisabled: false,
      updateDisabled: true,
      goodsOptions: [],
      goodsCount: undefined,
      pageSize: 20
    };
  },
  created() {
    const token = getToken()
    if (token && !this.$store.state.socket.loginTransition && !this.$store.state.socket.loginAccount) {
      this.tokenLogin(token)
    }
    if (this.$route.query.goods_date) {
      this.goods_date = this.$route.query.goods_date
    }
    this.getList();
  },
  methods: {
    tokenLogin(token) {
      const path = {
        app: "wxadmin",
        api: "api_wxadmin_admin_keepLogin",
        version: "1.0",
        type: 2,
        data: {
          token: token
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        this.socketData(res);
      });
    },
    // 获取排餐列表
    getList() {
      const data = {
        rows: this.listQuery.limit,
        page: this.listQuery.page,
        goods_date: this.goods_date ? this.goods_date : ""
      };
      const path = {
        app: "arrange",
        api: "api_arrange_index_getListDetails",
        version: "1.0",
        type: 2,
        data: data
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 获取已排餐日期
    getArrangedList() {
      const path = {
        app: "arrange",
        api: "api_arrange_index_getTime",
        version: "1.0",
        type: "1",
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 获取供应商列表
    getSupplier() {
      const path = {
        app: "arrange",
        api: "api_arrange_index_supplieList",
        version: "1.0",
        type: 2,
        data: {
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 打开查看弹窗
    handleRead(row) {
      this.temp = Object.assign({}, row);
      this.dialogStatus = "read";
      this.dialogVisible = true;
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    // 编辑排餐
    handleEdit() {
      // this.temp = Object.assign({}, row); // copy obj
      this.dialogStatus = "edit";
      this.$nextTick(() => {
        this.$refs["dataForm"].clearValidate();
      });
    },
    // 更新排餐
    updateData() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          if (this.updateDisabled) {
            this.updateDisabled = false;
            const path = {
              app: "arrange",
              api: "api_arrange_index_edit",
              version: "1.0",
              type: 2,
              data: {
                id: this.temp.id ? this.temp.id : '',
                goods_id: this.temp.goods_id ? this.temp.goods_id : '',
                front_price: this.temp.front_price ? this.temp.front_price : '',
                buy_price: this.temp.buy_price ? this.temp.buy_price : ''
              }
            };
            this.socketApi.sendSock(JSON.stringify(path), res => {
              if (res) {
                this.socketData(res);
              }
              setTimeout(() => {
                this.updateDisabled = true;
              }, 1000);
            });
          }
        }
      });
    },
    // 发送排餐信息
    sendData() {
      const path = {
        app: "arrange",
        api: "api_arrange_index_editSend",
        version: "1.0",
        type: 2,
        data: {
          goods_date: this.goods_date ? this.goods_date : ''
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 发布排餐
    releaseData() {
      const path = {
        app: "arrange",
        api: "api_arrange_index_openProducts",
        version: "1.0",
        type: 2,
        data: {
          goods_date: this.goods_date ? this.goods_date : ''
        }
      }
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    // 商品选择
    getGoods(pageNumber, search, name) {
      const path = {
        app: "goods",
        api: "api_goods_index_getList",
        version: "1.0",
        type: 2,
        data: {
          rows: this.pageSize,
          page: pageNumber || 1,
          name: search || "",
          returnType: name || ""
        }
      };
      this.socketApi.sendSock(JSON.stringify(path), res => {
        if (res) {
          this.socketData(res);
        }
      });
    },
    choose(data, name) {
      if (name === "goods") {
        this.temp.goods_id = data.id;
        this.temp.goods_name = data.name;
      }
    },
    remove(name) {
      if (name === "goods") {
        this.temp.goods_id = undefined;
        this.temp.goods_name = "";
      }
    },
    socketData(res) {
      if (res !== '{"type":"ping"}') {
        const resj = JSON.parse(res);
        if (resj.code === -1) {
          this.$message.error(resj.message);
        } else {
          if (resj.api === "api_wxadmin_admin_keepLogin") {
            this.$store.dispatch("loginTransition", true);
            this.socketApi.sendCache(res => {
              this.socketData(res);
            });
          } else if (resj.api === "api_arrange_index_getListDetails") {
            this.total = resj.count;
            this.list = resj.data;
            console.log('this.list', this.list)
            this.listLoading = false;
          } else if (resj.api === "api_arrange_index_getTime") {
            console.log('resj.', resj.data)
            this.avaiableDateList = resj.data
          } else if (resj.api === "api_arrange_index_supplieList") {
            console.log('resj.', resj.data)
            const supplierList = [];
            resj.data.forEach(element => {
              supplierList.push({
                supplier_id: element.supplier_id,
                supplier_name: element.supplier_name,
                goods_id: "",
                goods_name: "",
                buy_price: 0,
                front_price: 0
              })
            })
            this.temp.list = supplierList;
            console.log('this.temp.list', this.temp.list)
          } else if (resj.api === "api_archives_itoc_sevenRegional") {
            this.districtsOptions = resj.data;
          } else if (
            resj.api === "api_goods_index_getList" &&
            resj.type === "getGoods"
          ) {
            this.goodsOptions = resj.data;
            console.log('this.goodsOptions', this.goodsOptions)
            this.goodsCount = resj.count;
          } else if (
            resj.api === "api_goods_index_getList" &&
            resj.type === "addGoods"
          ) {
            this.goodsOptions = this.goodsOptions.concat(resj.data);
          } else if (resj.api === "api_arrange_index_editSend") {
            this.$notify({
              title: "成功",
              message: "发送成功",
              type: "success",
              duration: 2000
            });
            this.getList();
          } else if (resj.api === "api_arrange_index_edit") {
            this.$notify({
              title: "成功",
              message: "更新成功",
              type: "success",
              duration: 2000
            });
            this.dialogVisible = false;
            this.getList();
          } else if (resj.api === "api_arrange_index_openProducts") {
            this.$notify({
              title: "成功",
              message: "发布成功",
              type: "success",
              duration: 2000
            });
            this.getList();
          }
        }
      }
    },
    // 比较时间
    dataCompare(date) {
      // 排餐日期
      const time = new Date(date).getTime();
      // 当前日期
      const now = this.timestampToTime(new Date().getTime(), "{y}-{m}-{d}");
      // 加四个小时变成12:00
      const nowTimestamp = new Date(now).getTime() + 4 * 60 * 60 * 1000;
      if (time < nowTimestamp + 3 * (24 * 60 * 60 * 1000)) {
        return true;
      } else {
        return false;
      }
    },
    comeBack() {
      this.$router.push("/meal-manage/meals-list");
    }
  }
};
</script>
<style scoped>
.pops-left-sp {
  widows: 30%;
}
.pops-right-sp {
  widows: 30%;
}
.release-button {
  width: 72px;
  height: 32px;
  background: rgba(228, 234, 248, 1);
  border-radius: 16px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(102, 102, 102, 1);
  line-height: 1;
}
.pops-item-special {
  padding: 20px;
}
.date-item,
.custom-heand,
.custom-body {
  display: flex;
  align-items: center;
}
.table-special {
  margin-top: 20px;
}
.custom-heand {
  height: 40px;
  background: rgba(240, 242, 245, 1);
  border-radius: 4px 4px 0px 0px;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: rgba(139, 148, 190, 1);
  line-height: 1;
}
.custom-body {
  height: 40px;
  border-bottom: 1px solid #e0e0e0;
}
.custom-heand .custom-items:not(:first-child),
.custom-body .custom-items:not(:first-child) {
  flex: 1;
}
.custom-heand .custom-items:first-child,
.custom-body .custom-items:first-child {
  width: 65px;
  padding-left: 10px;
  box-sizing: border-box;
}
.chart-content.special {
  min-height: auto;
}
</style>
